<template>
<div>
<el-row :gutter="24">
<el-col :span="16">

<el-row :gutter="20">
  <el-col :span="4"><div >&nbsp;</div></el-col>
  <el-col :span="20">
  <div class="">
  已选择池子
  <p>{{this.$store.state.pool.name}}</p>
  </div>
  <el-button type="warning" class="bt-pool" v-if="this.isfocus==0" @click="focus()">关注池子</el-button>
  <el-button type="warning" class="bt-pool" v-if="this.isfocus==1" @click="cancel()">已关注</el-button>
  </el-col>
  </el-row>
  

  <el-row :gutter="20">
  <el-col :span="4">
  <div >&nbsp;</div></el-col>
  <el-col :span="7">
  <div class="grid-content bg-purple" v-if="this.isgold==1">
  <router-link to="/getmsg">
  <el-button type="success" class="bt-pool">淘消息</el-button>
  </router-link>
  </div>
  <div class="grid-content bg-purple" v-if="this.isgold==0">
  <el-button type="success" :disabled="true" class="bt-pool">淘币不足</el-button>
  </div>
  </el-col>
  <el-col :span="7">
  <div class="grid-content bg-purple">
  <router-link to="/createmsg">
  <el-button type="primary" class="bt-pool" >发消息</el-button>
  </router-link>
  </div>
  </el-col>
  <el-col :span="6">
  <div class="grid-content bg-purple">
  <el-button type="primary" class="bt-pool" @click="back()">返回</el-button>
  </div>
  </el-col>
  </el-row>



  <el-row :gutter="20">
  <el-col :span="4"><div >&nbsp;</div></el-col>
  <el-col :span="20">
  
  <div class="">
  <el-table
    :data="topmsg"
    stripe
    style="width: 100%"

    >
        <el-table-column
        prop="collectionnum"
        label="收藏数"
        width="120">
        </el-table-column>
        <el-table-column
        prop="upnum"
        label="获赞数"
        width="120">
        </el-table-column>
        <el-table-column
        prop="text"
        label="内容"
        width="220">
        </el-table-column>
        
        <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template scope="scope">
        <el-button
          @click.native.prevent="enter(scope.row)"
          type="text"
          size="small">
          点击查看信息
        </el-button>
      </template>
    </el-table-column>

    </el-table>
  </div>

  </el-col>
 </el-row>



</el-col>

<el-col :span="8">
<el-col :span="20">
<div >
<p>你可能喜欢的池子</p>
<div class="item-list clearfix">
    <div class="item" v-for="pool in this.$store.state.pool.pools" v-if="pool.labelid==nowlabel">
         <el-button :plain="true" class="bt-pool" type="info" @click="setpool(pool.poolid,pool.labelid,pool.name)">{{pool.name}}</el-button>
    </div>
    </div>
</div>
</el-col>
<el-col :span="4">
  <div >&nbsp;</div>
</el-col>
</el-col>

</el-row>
</div>
</template>

<script>
import axios from 'axios'
import store from './vuex/store'
import VueRouter from 'vue-router'

const myApi = axios.create({
  baseURL: 'http://localhost:8081',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    'Content-Type': 'application/json',
  }
});

export default {
  data () {
    return {
          isfocus:'',
          nowlabel: '',
          topmsg: [],
          isgold:'',
        }
    },
    methods: {
      focus(){
        var thisVue = this;
        myApi.get('/pool/focusPool',{
                    params: {
                        uid: thisVue.$store.state.userinfo.uid, 
                        poolid: thisVue.$store.state.pool.poolid
                    }
                }).then(response => {
            console.log(response);
            thisVue.isfocus=1;
            thisVue.$router.push('/pool');
        }, response => {
            // error callback
        });
      },
      cancel(){
        var thisVue = this;
        myApi.get('/pool/cancelFocus',{
                    params: {
                        uid: thisVue.$store.state.userinfo.uid, 
                        poolid: thisVue.$store.state.pool.poolid
                    }
                }).then(response => {
            console.log(response);
            thisVue.isfocus=0;
            thisVue.$router.push('/pool');
        }, response => {
            // error callback
        });
      },
      setpool(a,b,c){
        var thisVue = this;
        this.$store.dispatch('setpool' , { 
                      'pool' : a,
                      });
         this.$store.dispatch('setlabel' , { 
                     'label' : b,
                     });
        this.$store.dispatch('setname' , { 
                     'name' : c,
                     });
          myApi.get('/pool/isFocus',{
                    params: {
                        uid: thisVue.$store.state.userinfo.uid, 
                        poolid: a
                    }
                }).then(response => {
            // console.log(response.data.message);
            thisVue.isfocus=response.data.id;
            // thisVue.$store.dispatch('getlable' , { 
            //           'labels' : response.data,
            //           });
        }, response => {
            // error callback
        });
       

        this.$router.push('/pool');
       //console.log(this.$store.state.pool.poolid);
      },
      back(){
            this.$store.dispatch('setlabel' , { 
                     'label' : 0,
                     });
            this.$router.push('/');
      },
      enter(a){
        console.log(a);
        this.$store.dispatch('setnew' , 0 );
        this.$store.dispatch('getmsg' , {
                      'id': a.mid,
                      'text': a.text,
                      'up': a.upnum,
                      'down':a.downnum,
                      'filepath':a.filepath
                    } );
        this.$router.push('/getmsg');
      },
    },
  created: function() {
        var thisVue = this;
        this.nowlabel=this.$store.state.pool.labelid;
        myApi.get('/pool/isFocus',{
                    params: {
                        uid: thisVue.$store.state.userinfo.uid, 
                        poolid: thisVue.$store.state.pool.poolid
                    }
                }).then(response => {
           // console.log(response);
            thisVue.isfocus=response.data.id;
        }, response => {
            // error callback
        });

        myApi.get('/messages/recommendTop10Msgs',{
                    params: {
                        poolid: thisVue.$store.state.pool.poolid
                    }
                }).then(response => {
             console.log(thisVue.$store.state.pool.poolid);
            // console.log(response);
            this.topmsg= response.data;
        }, response => {
            // error callback
        });

        myApi.get('/messages/isHasGold',{
                    params: {
                        uid: thisVue.$store.state.userinfo.uid, 
                        poolid: thisVue.$store.state.pool.poolid
                    }
                }).then(response => {
           console.log(response);
            thisVue.isgold=response.data.id;
            console.log(thisVue.isgold);
        }, response => {
            // error callback
        });
    }
}

</script>

<style>
  .el-row {
    margin-top:30px;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
    fill: red;
    stroke: black;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .bt-pool{
  width: 100%; 
  height: auto;
}
.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}
.clearfix:after{
  clear:both;
}
.item-list{
  font-size:14px;
  display: block;
}
.item{
  position: relative;
  float: left;
  width: 50%;
  list-style: none;
  border-bottom: 1px dotted #eee;
  color: #48576a;
}
</style>
